<template>

    <div class="json-editor-wrapper">

        <div class="json-editor">
            <monacoEditor v-model="props.modelValue" :readOnly="true" valueFormat="json" :minimap="false" language="json"
                :lineNumbers="false" :folding="false"></monacoEditor>
        </div>

        <span class="action-btn" title="展开操作" @click="openEditor">
            <FullscreenOutlined />
        </span>

        <jsonEditorModal ref="jsonEditorModalRef" @saveCodeData="saveCodeData"></jsonEditorModal>
        
    </div>
</template>

<script setup>
import monacoEditor from '../monacoEditor/monacoEditor.vue';
import jsonEditorModal from './jsonEditorModal.vue';
import { ref, reactive, watch } from 'vue'

const emit = defineEmits(['update:modelValue', 'change'])

const jsonEditorModalRef = ref(null)

const props = defineProps({
    // 编辑器的值
    modelValue: { type: [String, Object], default: '' },
})

const data = reactive({
    // 显示编辑器
    codeData: props.modelValue,
})

const openEditor = () => {
    jsonEditorModalRef.value.open(props.modelValue);
}

// // 监听数据的变化
// watch(() => props.modelValue, (newValue, oldValue) => {
//     alert("监听数据的变化");
//     emit('update:modelValue', newValue);
// }, { deep: true });

const saveCodeData = (value) => {
    emit('update:modelValue', value);
}

</script>

<style lang="less" scoped>
.json-editor-wrapper {
    position: relative;

    &:hover {
        .action-btn {
            opacity: 1;
        }
    }

    .action-btn {
        position: absolute;
        top: 5px;
        background-color: #fff;
        border: 1px solid var(--borderColor);
        right: 18px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.1s;
        box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
    }

    .json-editor {
        height: 200px;
        width: 100%;
        border: 1px solid var(--borderColor);
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 5px;
    }
}
</style>
